
<template>
  <div>
    <div>优化前卡</div>
    <hr>
  <!--  <div class="scroller">
      <Listltem v-for="item in item" :key="item.id" :item="item" />
    </div>-->
    <div>优化后</div>
    <hr>
    <div>
      <RecycleScroller
        :items="items"
        :itemSize="54"
        class="scroller"
      >
        <templte slot-scope="{item}">
          <ListItem2  :item="item" />
        </templte>
      </RecycleScroller>

    </div>
  </div>
</template>

<script>
  import Listltem from "./components/Listltem.vue";
  import ListItem2 from "./components/Listltem2.vue";
  import RecycleScroller from "./components/RecycleScroller.vue";


  export default {
    components:{
      Listltem,
      ListItem2,
      RecycleScroller
    },
    created() {
      // for (var i = 0; i < 10000; i++) {
      //   this.item.push({
      //     id: i + 1,
      //     count: i + 1,
      //   })
      // }

      for (var i = 0; i < 10000; i++) {
        this.items.push({
          id: i + 1,
          count: i + 1,
        });
      }
    },
    data() {
      return {
        // item:[],
        items:[]
      };
    },

  };
</script>

<style lang="scss" scoped>
.scroller{
  width: 500px;
  height: 600px;
  overflow: auto;
}
</style>
